<template>
	<div class="normal-block" :style="{'height':height}">
		<div v-if="isTitle" class="title" :class="titleType">{{ title }}</div>
		<slot></slot>
	</div>
</template>

<script>

export default {
	name: "normal-block",
	components: {},
	props: {
		title: { //标题文字内容
			type: String,
			default: ''
		},
		height: {  //容器高度
			type: String,
			default: '28.7vh'
		},
		titleType: {
			type: String, //标题类型，blueSmall,blueBig,greenSmall,greenBig
			default: 'blueSmall'
		},
		isTitle:{
			type:Boolean,//是否显示title
			default:true
		}
	},
	data() {
		return {}
	},
	computed: {},
	created() {
	},
	mounted() {
	},
	methods: {
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.normal-block {
	width: 100%;
	// background: rgba(4, 35, 162, 0.08);
	// border: 1px solid  #00E5ED;
	// border: 1px solid #0e7fd6;
	// box-shadow: 0 0 1.51vh rgba(1, 185, 71, 0.5) inset;
	overflow-y: auto;

	.title {
		width: 100%;
		height: 3.98vh;
		margin-top:-1px;
		padding-left: 1vw;
		line-height: 3.98vh;
		color: #FFFFFF;
		font-size: 0.94vw;
		font-weight: bold;
		text-align: left;
		&.blueBig {
			background: url("../assets/images/title-bg.png") top center no-repeat;
			background-size: 100% 100%;
			// background: url("../assets/images/chart_block_title_blue_big.png") top center no-repeat;
			// background-size: auto 100%;
		}

		&.blueSmall {
			background: url("../assets/images/title-bg.png") top center no-repeat;
			background-size: 100% 100%;
			// background: url("../assets/images/chart_block_title_blue_sm.png") top center no-repeat;
			// background-size: auto 100%;
		}
		&.moreBlueBig {
			background: url("../assets/images/title-bg.png") top center no-repeat;
			background-size: 100% 100%;
			// background: url("../assets/images/chart_block_title_blue_more_big.png") top center no-repeat;
			// background-size: auto 100%;
		}
	}
}
</style>
